<template>
  <div>
    <p class="item">广告管理</p>
    <el-row :gutter="20" id="box1">
      <el-col :span="24">
        <div class="grid-content bg-purple" id="bos"></div
      ></el-col>
    </el-row>
    <br />
    <br />

    <div class="cen">
      <ul>
        <li class="title">
          <span><input type="checkbox" /></span>
          <span>广告图</span>
          <span>投放标题</span>
          <span>投放位置</span>
          <span>类别</span>
          <span>图片尺寸</span>
          <span>创建时间</span>
          <span>状态</span>
          <span>操作</span>
        </li>
        <li class="content" v-for="item in list" :key="item.goodsId">
          <span><input type="checkbox" /></span>
          <img :src="item.goodsImg" alt="" />
          <span>{{ item.goodsName }}</span>
          <span>{{ item.goodsShop }}</span>
          <span>{{ item.goodsClassify }}</span>
          <span>{{ item.goodsSize }}</span>
          <span>{{ item.goodsDate }}</span>
          <span>
            <el-switch v-model="item.goodsState" />

          </span>
          <span>
            <a style="color: #126dff">编辑</a>
            <a style="color: red">删除</a>
          </span>
        </li>
      </ul>
    </div>
    <el-pagination
      style="text-align: center; margin-left: 340px"
      background="true"
      layout="prev, pager, next, jumper"
      :total="count"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import * as echarts from "echarts";

import advenment from "../../../../mock/advenment";

export default defineComponent({
  setup() {
    onMounted(() => {
      const bos = document.getElementById("bos");
      if (bos) {
        var myChart = echarts.init(bos);
        var option;
        option = {
          title: {
            text: "广告收益",
            top: 15,
            left: 30,
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: ["收入", "支出"],
            icon: "circle",
            right: 300,
            top: 10,
            itemGap: 30,
          },

          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },

          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              markLine: {
                symbol: ["none", "none"],
                label: { show: false },
                data: [
                  { xAxis: 1 },
                  { xAxis: 2 },
                  { xAxis: 3 },
                  { xAxis: 4 },
                  { xAxis: 5 },
                  { xAxis: 6 },
                  { xAxis: 7 },
                  { xAxis: 8 },
                  { xAxis: 9 },
                  { xAxis: 10 },
                  { xAxis: 11 },
                  { xAxis: 12 },
                ],
              },
              name: "收入",
              type: "line",
              areaStyle: {},
              smooth: true,
              data: [34, 70, 30, 62, 80, 90, 60, 30, 40, 60, 65, 90],
            },
            {
              name: "支出",
              type: "line",
              areaStyle: {},
              smooth: true,
              data: [30, 35, 60, 58, 35, 60, 30, 64, 50, 60, 30, 60],
            },
          ],
        };

        option && myChart.setOption(option);
      }
    });
     const count = ref(0);
    const num = ref<number>(1);
    const currentPage = ref(1);
    const pageSize = ref(10);
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    const handleCurrentChange = async (val: number) => {
      console.log(val);
      num.value = val;
      const res: any = await advenment.getData({
        page: num.value,
        size: 10,
      });
      console.log(num.value);
      list.value = res.result;
    };
    interface NavList {
      [propname: string]: string;
    }
    let list = ref<NavList[]>([]);
    onMounted(async () => {
      const res: any = await advenment.getData({
        page: num.value,
        size: 10,
      });

      console.log("data", res.result);
      list.value = res.result;
      count.value = res.count;
    })
    const value1 = ref(true);

    return {
      list,
      value1,
      currentPage,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      count,
      num
    };
  },
});
</script>

<style lang="less">
.cen {
  .content {
    display: flex;
    justify-content: space-around;
    height: 66px;
    line-height: 66px;
    font-size: 12px;
    text-align: center;
    align-items: center;
    background: white;
    span {
      flex:1;
      a {
        margin-right: 3px;
      }

      .el-switch {
        // width: 10%;
        display: block;
        // width: 40px !important;
      }
    }
  }
  .title {
    display: flex;
    height: 66px;
    justify-content: space-around;
    line-height: 66px;
    font-size: 16px;
    color: white;
    background: #126dff;
    text-align: center;
    align-items: center;
    span {
      width: 10%;
    }
  }
}

.item {
  font-size: 16px;
  font-weight: bolder;
  padding-left: 7px;
  margin-bottom: 20px;
  border-left: 3px solid blue;
  span {
    font-size: 12px;
  }
}
#box1 {
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 412px;
    background: white;
  }
}
</style>
